<div class="project-module-description">
  <span>Monitor the status of your queued job. (<a href="https://docs.opencatapult.net/home/concept#job-queue" target="_blank">more...</a>)</span>
</div>

<nav mat-tab-nav-bar flex>
  <a mat-tab-link (click)="getCurrentJobQueues()" [routerLink]="['current']" routerLinkActive #rlaCurrent="routerLinkActive" [active]="rlaCurrent.isActive">
    <span matBadge="{{currentJobs.length}}" matBadgeOverlap="false" [matBadgeHidden]="currentJobs.length <= 0">Current Items</span>
  </a>
  <a mat-tab-link (click)="getCurrentJobQueues()" [routerLink]="['pending']" routerLinkActive #rlaPending="routerLinkActive" [active]="rlaPending.isActive">
      <span matBadge="{{pendingJobs.length}}" matBadgeOverlap="false" [matBadgeHidden]="pendingJobs.length <= 0">Pending Items</span>
  </a>
  <a mat-tab-link (click)="getPastJobQueues()" [routerLink]="['past']" routerLinkActive #rlaPast="routerLinkActive" [active]="rlaPast.isActive">Past Items</a>
</nav>
<app-loading-spinner *ngIf="loading"></app-loading-spinner>
<router-outlet *ngIf="!loading"></router-outlet>
